// 1. 导入`react`和`react-dom/client`
import React from 'react';
import ReactDOM from 'react-dom/client';

// 2. 创建 react 元素（虚拟DOM对象）
const h1 = React.createElement('h1', null, 'Hello React');

// 创建一个 p 标签，包含“月薪过万”文本
// 添加 id 属性
const p = React.createElement('p', { id: 123, className: 'title' }, '月薪过万');

// 创建一个div标签，包含上面创建的p标签
const div = React.createElement('div', null, p);

const list = React.createElement(
  'div',
  null,
  React.createElement('h2', null, '购物列表'),
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, '华为'),
    React.createElement('li', null, 'iPhone')
  )
);

console.log(list);

const hello = React.createElement('hello', null, 'hello');

// 3. 渲染 react 元素到页面中
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render([h1, p, div, list, hello]);
